/*
 * @Author: wwssaabb
 * @Date: 2021-03-04 15:29:11
 * @LastEditTime: 2021-03-04 17:24:05
 * @FilePath: \sass_demo\Focus Picture Switch\js\main.js
 */

 let save_x=0
 let save_y=0
 let choose_index=0
let main_show=document.getElementsByClassName('show')[0]
let breviaryArr=document.getElementsByClassName('breviary-wrap')[0].children
let frame=document.getElementsByClassName('frame')[0]
breviaryArr=Array.from(breviaryArr)
breviaryArr.pop()

main_show.style=`background-image:url(${'./static/img_1.jpg'});`
frame.style=`top:${breviaryArr[0].offsetTop}px;left:${breviaryArr[choose_index].offsetLeft}px;`
breviaryArr.forEach((e,i) => {
  let in_x=e.offsetLeft
  let in_y=e.offsetTop
  e.addEventListener('mousemove',()=>{
    main_show.style=`background-image:url(${'./static/img_'+(i+1)+'.jpg'});transition:.5s;`
    frame.style=`top:${in_y}px;left:${in_x}px;transition:.5s ease-in-out;`
  })
  e.addEventListener('mouseout',()=>{
    main_show.style=`background-image:url(${'./static/img_'+(choose_index+1)+'.jpg'});transition:.5s ease;`
    frame.style=`top:${breviaryArr[choose_index].offsetTop}px;left:${breviaryArr[choose_index].offsetLeft}px;transition:.5s ease-in-out;`
  })
  e.addEventListener('click',()=>{
    choose_index=i
    main_show.style=`background-image:url(${'./static/img_'+(choose_index+1)+'.jpg'});transition:.5s ease;`

  })
});
